<script setup lang="ts">
withDefaults(
  defineProps<{
    commitDetail: any
  }>(),
  {
    commitDetail: []
  }
)
</script>
<template>
  <el-card shadow="hover">
    <template #header>
      <div style="display: flex; justify-content: space-between">
        <el-text>提交详情</el-text>
        <el-link type="primary" :underline="false" href="https://gitee.com/SeaHappy0501/blogAdmin" target="_blank">
          查看更多
        </el-link>
      </div>
    </template>
    <div v-for="c in commitDetail" :key="c.sha" class="detail">
      <el-avatar :size="50" fit="cover" shape="square" :src="c.author.avatar_url" />
      <div>
        <p>{{ c.commit.message }}</p>
        <p>{{ c.commit.committer.date }}</p>
      </div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.el-card {
  display: flex;
  flex-direction: column;

  :deep(.el-card__body) {
    overflow-y: scroll;
    @include scrollBar;

    .detail {
      display: flex;
      padding: pxToRem(10) 0;

      span {
        min-width: var(--el-avatar-size);
      }

      & > div:last-child {
        font-size: pxToRem(12);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: pxToRem(16);

        & > p:first-child {
          font-size: pxToRem(16);
          font-weight: bold;
        }

        & > p:last-child {
          color: #999999;
        }
      }
    }
  }
}
</style>
